<script lang="ts" setup>
import { inject } from 'vue'
import { type Ref, ref } from 'vue'
import ArticleProfile from '@/components/Article/ArticleProfileCard.js';
import { profileList_dev} from '@/styles/DevData'




</script>


<template>
    <div id="article__profile__list__wrapper">
        <div class="arcticle__profile__list__left">
            <ul class="arcticle__profile__list__left__nav">

            </ul>
            <ul class="arcticle__profile__list__left__articles">
                <article-profile v-for="profile in profiles" :key="profile.articleId" :profileProp="profile"></article-profile>
            </ul>
        </div>
        <div class="right" v-if="!isLowerWidth">

        </div>

    </div>

</template>



<style lang="scss">
@import "@/styles/Global";
#article__profile__list__wrapper{
    grid-column: 1 / 13;
}

 //@media (min-width:$ResponsiveMinWidth){
 //   #article__profile__list__wrapper{
 //       display:grid;
 //       grid-template-columns: minmax(0, 1fr) 480px;
 //       .arcticle__profile__list__left__nav{
 //           height: 3.5rem;
 //       }
 //       .arcticle__profile__list__left__articles{
 //           display: grid;
 //           grid-template-columns: repeat(3,minmax(0,1fr));
 //           gap: 2rem;
 //       }
 //
 //
 //   }
 //}
 //@media (max-width:$ResponsiveMinWidth){
 //   #article__profile__list__wrapper{
 //       display:flex;
 //       flex-direction: column;
 //
 //       .arcticle__profile__list__left__articles{
 //           display: grid;
 //           grid-template-columns: repeat(1,minmax(0,1fr));
 //           gap: 2rem;
 //       }
 //   }
 //}

</style>